<template>
  <view>
    <view class="hrader">
      <image
        src="../../../static/bback.png"
        class="goback"
        @click="back"
        mode=""
      />
      我的账单
    </view>
    <view class="" style="padding-top: 110rpx">
      <view
        class="xiaofei"
        v-for="(item, index) in Consumptionlist"
        :key="index"
      >
        <view class="fukuan">
          <view>
            <view style="font-size: 30rpx; color: #333333">{{
              item.order_type_text
            }}</view>
            <view
              style="padding-top: 10rpx; font-size: 26rpx; color: #999999"
              >{{ item.add_time | formatDate }}</view
            >
          </view>
        </view>
        <view
          v-if="item.true_amount > 0"
          style="font-size: 34rpx; color: #e68903"
          >+{{ item.true_amount }}</view
        >
        <view
          v-if="item.true_amount < 0"
          style="font-size: 34rpx; color: #c52b2e"
          >{{ item.true_amount }}</view
        >
      </view>
    </view>
    <view class="noData" v-if="noDat">
      <image class="img" src="../../../static/Shopping/nodata.png" mode="" />
      <text>您还没有相关账单~</text>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      noDat: false,
      token: "",
      page: 1, // 页码
      pageSize: 10, // 每页条数
      Consumptionlist: [],
      total: "",
      last_page: "",
    };
  },
  onLoad() {
    this.token = uni.getStorageSync("token");
    this.getMyBill();
  },
  onReachBottom() {
    if (this.total / 10 <= this.last_page && this.total > 10) {
      this.loadMore();
    }
  },
  methods: {
    // 获取消费记录列表
    async getMyBill() {
      this.page = 1;
      const res = await this.$myRequest({
        url: "index/getMyBill",
        method: "POST",
        data: {
          page: this.page, // 页码
          pageSize: this.pageSize, // 每页条数
          type: "",
        },
      });
      this.Consumptionlist = res.data.data.data;
      this.total = res.data.data.total;
      this.last_page = res.data.data.last_page;
      if (this.Consumptionlist.length == 0) {
        this.noDat = true;
      } else {
        this.noDat = false;
      }
    },
    // 获取消费记录下一页列表
    async loadMore() {
      const res = await this.$myRequest({
        url: "index/getMyBill",
        method: "POST",
        data: {
          page: (this.page += 1), // 页码
          pageSize: this.pageSize, // 每页条数
          type: "",
        },
      });
      this.Consumptionlist = this.Consumptionlist.concat(res.data.data.data);
      this.total = res.data.data.total;
      this.last_page = res.data.data.last_page;
    },
    back() {
      uni.navigateBack({
        delta: 1,
      });
    },
  },
};
</script>

<style lang="scss">
.hrader {
  width: 100%;
  height: 88rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  position: relative;
  font-size: 36rpx;
  font-weight: 500;
  color: #333333;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 99;
  border-bottom: 20rpx solid #f4f4f4;
  .goback {
    position: absolute;
    width: 22rpx;
    height: 34rpx;
    left: 28rpx;
  }
}
.xiaofei {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 690rpx;
  height: 145rpx;
  box-sizing: border-box;
  border-bottom: 1rpx solid #eee;
  margin: 0 auto;
  .fukuan {
    display: flex;
    align-items: center;
  }
}
.xiaofei:last-of-type {
  border-bottom: none;
}
.noData {
  width: 100%;
  min-height: calc(100vh - 210rpx);
  background: #fff;
  overflow: hidden;
  .img {
    display: block;
    width: 348rpx;
    height: 190rpx;
    margin: 314rpx auto 30rpx;
  }
  text {
    display: block;
    width: 100%;
    text-align: center;
    font-size: 30rpx;
    font-weight: 400;
    color: #999999;
    letter-spacing: 2rpx;
  }
}
</style>
